<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>资源权限管理</title>
		<script src="../static/babel/6.26.0/polyfill.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/axios/0.17.1/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/vue/2.5.13/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/element-ui/2.1.0/index.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../static/element-ui/2.1.0/index.css" />
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/hou-tai.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/hou-tai.css" />
	</head>

	<body>
		<div id="app">
			<hou-tai>
				<div style="width: 90%; margin: auto;">
					<el-row type="flex" justify="space-around" align="middle">
						<el-col>
							通常需要使用此功能时，代码中也会有相应改动，改动之后重启服务生效！<br />（该功能仅供开发人员使用）
						</el-col>
						<el-col align="right">
							<el-button icon="el-icon-edit" @click="dialogAuthorityVisible = true">权限管理</el-button>
							<el-button type="success" icon="el-icon-plus" @click="dialogAddAuthorityVisible = true">新增权限</el-button>
							<el-button type="success" icon="el-icon-plus" @click="dialogAddResourceVisible = true">新增资源</el-button>
						</el-col>
					</el-row>
					<br />
					<el-row type="flex" justify="space-around" align="middle">
						<el-col :span="6">
							<el-card class="list">
								<div v-for="resource in resources" class="item" @click="selectResource(resource)">
									{{resource.url}} ({{resource.method}})
								</div>
							</el-card>
						</el-col>
						<el-col :span="15" align="center">
							<el-card class="edit">
								<el-row type="flex" justify="space-between" align="middle">
									<el-col :span="3">
										资源url：
									</el-col>
									<el-col :span="6">
										<el-input v-model="resource.url"></el-input>
									</el-col>
									<el-col :span="3">
									</el-col>
									<el-col :span="3">
										请求方法：
									</el-col>
									<el-col :span="6">
										<el-select v-model="resource.method" clearable filterable placeholder="请选择">
											<el-option v-for="method in methods" :key="method.value" :label="method.label" :value="method.value">
											</el-option>
										</el-select>
									</el-col>
									<el-col :span="3">
										<el-button size="mini" type="success" icon="el-icon-check" round @click="updateResource()"></el-button>
									</el-col>
								</el-row>
								<br />
								<el-transfer v-model="hasAuthority" :data="authorityData" :titles="['不可访问权限', '可访问权限']"></el-transfer>
								<br />
								<el-button type="danger" @click="deleteResource()">删除</el-button>
								<el-button type="primary" @click="saveResource()">保存</el-button>
							</el-card>
						</el-col>
					</el-row>
					<el-dialog title="新增资源" :visible.sync="dialogAddResourceVisible" width="400px" @keyup.enter.native="submitAddResourceForm('addResource')">
						<el-form :rules="addResourceRules" :model="addResource" ref="addResource" label-width="80px">
							<el-form-item label="资源url" prop="url">
								<el-input v-model="addResource.url" placeholder="请输入资源url"></el-input>
							</el-form-item>
							<el-form-item label="请求方法" prop="method">
								<el-select v-model="addResource.method" clearable filterable placeholder="请选择">
									<el-option v-for="method in methods" :key="method.value" :label="method.label" :value="method.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button @click="resetForm('addResource')">重置</el-button>
								<el-button type="primary" @click="submitAddResourceForm('addResource')">确定</el-button>
							</el-form-item>
						</el-form>
					</el-dialog>
					<el-dialog title="新增权限" :visible.sync="dialogAddAuthorityVisible" width="400px" @keyup.enter.native="submitAddAuthorityForm('addAuthority')">
						<el-form :rules="addAuthorityRules" :model="addAuthority" ref="addAuthority" label-width="80px">
							<el-form-item label="权限名称" prop="name">
								<el-input v-model="addAuthority.name" placeholder="请输入权限名称"></el-input>
							</el-form-item>
							<el-form-item label="描述" prop="description">
								<el-input v-model="addAuthority.description" placeholder="请输入描述"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button @click="resetForm('addAuthority')">重置</el-button>
								<el-button type="primary" @click="submitAddAuthorityForm('addAuthority')">确定</el-button>
							</el-form-item>
						</el-form>
					</el-dialog>
					<el-dialog title="权限管理" :visible.sync="dialogAuthorityVisible" width="800px" @keyup.enter.native="submitUpdateAuthorityForm('editAuthority')">
						<el-row type="flex" justify="space-around" align="middle">
							<el-col>
								<el-card class="authorityList">
									<div v-for="authority in authorities" class="item" @click="selectAuthority(authority)">
										{{authority.description}} ({{authority.name}})
										<el-button size="mini" type="danger" icon="el-icon-delete" round @click="deleteAuthority(authority)"></el-button>
									</div>
								</el-card>
							</el-col>
							<el-col>
								<el-form :rules="updateAuthorityRules" :model="editAuthority" ref="editAuthority" label-width="80px">
									<el-form-item label="权限名称">
										<el-input v-model="editAuthority.name" :disabled="true"></el-input>
									</el-form-item>
									<el-form-item label="描述" prop="description">
										<el-input v-model="editAuthority.description" placeholder="请输入描述"></el-input>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="submitUpdateAuthorityForm('editAuthority')">确定</el-button>
									</el-form-item>
								</el-form>
							</el-col>
						</el-row>
					</el-dialog>
				</div>
			</hou-tai>
		</div>
		<script src="js/resourceAuthority.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/resourceAuthority.css" />
	</body>

</html>